/*
 * @Author: sonss
 * @Date: 2023-06-29 11:28:19
 * @LastEditTime: 2024-09-03 19:10:11
 * @FilePath: /ss-file-antd/src/pages/Assets/Category/modules/Edit.tsx
 * @Description:
 */
import ImageUpload from '@/components/Upload/Image';
import { HiddenEnum, HiddenLabelEnum } from '@/enums/defaults';
import { Save, Trees } from '@/services/assets_category';
import {
  DrawerForm,
  ProFieldRequestData,
  ProForm,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProFormTreeSelect,
  RequestOptionsType,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
import _ from 'lodash';
import { useEffect } from 'react';

type EditModuleProps = {
  record?: ASSETS.CATEGORY.Info;
  onClose?: () => void;
  onSuccess?: () => void;
};

const EditModule: React.FC<EditModuleProps> = (props) => {
  const [form] = Form.useForm<ASSETS.CATEGORY.SaveForm>();
  const [messageApi, contextHolder] = message.useMessage();

  useEffect(() => {
    const fieldsValue: ASSETS.CATEGORY.SaveForm = _.pick(
      props.record,
      'parentId',
      'code',
      'name',
      'cover',
      'description',
      'isHidden',
      'priority',
    );
    form.setFieldsValue(fieldsValue);
  }, [props.record]);

  const handleOpenChange = (val: boolean) => {
    if (val) {
      return;
    }
    form.resetFields();

    if (props.onClose) {
      props.onClose();
    }
  };

  const finish = async (values: any) => {
    const formData: ASSETS.CATEGORY.SaveForm = {
      ...values,
    };

    if (props.record && props.record.id) {
      formData.id = props.record.id;
    }

    const res = await Save(formData);
    if (res.code !== 0) {
      messageApi.error(res.message);
      return;
    }

    if (props.onSuccess) {
      props.onSuccess();
    }
  };

  const parse = (child: ASSETS.CATEGORY.Tree): RequestOptionsType => {
    const tree: RequestOptionsType = {
      title: child.name,
      value: child.id,
    };

    if (child.children && child.children.length > 0) {
      tree.children = child.children.map((v) => parse(v));
    }
    return tree;
  };

  const loadTrees: ProFieldRequestData<RequestOptionsType> = async () => {
    const res = await Trees();
    if (res.code !== 0) {
      return [];
    }

    const trees: RequestOptionsType[] = [
      {
        title: '根目录',
        value: 0,
        children: res.data?.list?.map((v) => parse(v)),
      },
    ];
    // console.log('trees: ', trees);
    return trees;
  };

  return (
    <>
      <DrawerForm
        title="编辑信息"
        form={form}
        drawerProps={{
          destroyOnClose: true,
        }}
        open={true}
        onOpenChange={handleOpenChange}
        onFinish={finish}
        width="35%"
      >
        <ProFormTreeSelect
          name="parentId"
          label="所属上级"
          placeholder="选择上级分类"
          width={300}
          request={loadTrees}
          initialValue={0}
        />
        <ProFormText
          name="name"
          width="md"
          label="名称"
          placeholder="请输入"
          rules={[{ required: true, message: '请输入' }]}
        />
        <ProForm.Item name="cover" label="封面图">
          <ImageUpload multiple={false} />
        </ProForm.Item>
        <ProFormText name="code" width="sm" label="标识码" placeholder="请输入" />
        <ProFormText name="description" width="xl" label="描述" placeholder="选填" />
        <ProFormSelect
          name="isHidden"
          label="是否隐藏"
          placeholder="请选择"
          options={HiddenLabelEnum}
          style={{ width: 200 }}
          initialValue={HiddenEnum.False}
        />
        <ProFormDigit label="权重值" name="priority" width="sm" min={0} initialValue={0} />
      </DrawerForm>
      {contextHolder}
    </>
  );
};

export default EditModule;
